<template>
    <div v-transfer-dom>
        <popup v-model="showPopup">
            <div class="h44 px12 white-bg" flex="main:justify">
                <a class="text3" @click="showPopup = false">取消</a>
                <a class="c7" @click="confirm">确认</a>
            </div>
            <picker :data='list' v-model='input'></picker>
        </popup>
    </div>
</template>
<script>
  export default {
    props: ['value', 'show'],
    data () {
      return {
        cacheSelected: [],
        list: [[{}]]
      }
    },
    computed: {
      input: {
        get () {
          const v = [String(this.value)]
          this.cacheSelected = v
          return v

        },
        set (v) {
          this.cacheSelected = v
        }
      },
      showPopup: {
        get () {
          return this.show
        },
        set (v) {
          this.$emit('update:show', v)
        }
      }
    },
    mounted () {
      this.getList()
    },
    methods: {
      async getList () {
        const list = (await $g.shopListAsync()).map(x => ({
          name: x.shopName,
          value: String(x.id)
        }))
        this.list = list.length ? [list] : [[{}]]
      },
      confirm () {
        const id = this.cacheSelected[0]
        const obj = this.list[0].find(x => x.value == id)
        this.$emit('input', String(id))
        this.$emit('update:name', obj.name)
        this.showPopup = false
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
